import React, { Component ,useState,useEffect} from "react";
import { Input, Space } from 'antd';
const { Search } = Input;
export function addCanvas(Com){
    return class Circle extends Component {
      constructor(color, radius, v, angle, x, y) {
        super();
        this.color = color;
        this.radius = radius;
        this.v = v;
        this.angle = angle;
        this.x = x;
        this.y = y;
        // 创建一个 ref 来存储 canvas 的 DOM 元素
        this.canvas = React.createRef();
      }
    
      componentDidMount() {
        //获取真实canvasDOM
        const canvas = this.canvas.current;
        //圆对象数组
        let arr = [];
        //圆数量
        const CNT = 50;
        //绘制区域中心点
        let centerX, centerY;
        //绘制上下文
        const ctx = canvas.getContext("2d");
        //设置canvas满屏
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        //设置中心点
        centerX = canvas.width / 2;
        centerY = canvas.height / 2;
        //实例化圆
        for (let i = 0; i < CNT; i++) {
          let c1 = new Circle(
            //随机颜色
            "rgba(" +
            255 * Math.random() +
            "," +
            255 * Math.random() +
            "," +
            255 * Math.random() +
            "," +
            Math.random() +
            ")",
            //随机半径
            66 * Math.random() + 1,
            //随机速度
            4 * Math.random() + 1,
            //随机角度
            360 * Math.random(),
            //x坐标
            centerX,
            //y坐标
            centerY
          );
          arr.push(c1);
        }
    
        function draw() {
          //清除画布
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          for (let i = 0; i < CNT; i++) {
            //移动x坐标
            arr[i].x += arr[i].v * Math.cos(arr[i].angle);
            //移动y坐标
            arr[i].y += arr[i].v * Math.sin(arr[i].angle);
            //反弹（angle在笛卡尔坐标系）
            if (arr[i].y < arr[i].radius) {
              //上
              arr[i].angle = 0 - arr[i].angle;
            }
            if (arr[i].y > canvas.height - arr[i].radius) {
              //下
              arr[i].angle = 0 - arr[i].angle;
            }
            if (arr[i].x < arr[i].radius) {
              //左
              arr[i].angle = Math.PI - arr[i].angle;
            }
            if (arr[i].x > canvas.width - arr[i].radius) {
              //右
              arr[i].angle = Math.PI - arr[i].angle;
            }
            //调用圆的绘制方法
            arr[i].draw(ctx);
          }
          //延迟50ms
          setTimeout(draw, 42);
        }
        //调用绘制
        draw();
      }
    
      /**
       * 绘制圆
       * @param  ctx 绘制上下文
       */
      draw(ctx) {
        //开始绘制路径
        ctx.beginPath();
        //绘制圆
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        //关闭绘制路径
        ctx.closePath();
        //设置fill颜色
        ctx.fillStyle = this.color;
        //fill
        ctx.fill();
      }
    
      render() {
        return <div style={{height:"100%"}}>
            <canvas ref={this.canvas} style={{background:'#166c86',
            position:'absolute',
          }} className="circle"></canvas>
            <Com/>
            </div>
      }
    }
    
    
}
// absolute'脱离文档流

// 给表格添加数据

export function initTable (fn){

  return (Com)=>{
    return ()=>{
      const [data,setData] = useState([])

      useEffect(()=>{
        fn().then((res)=>{
          setData(res.data)
        })
      },[])
      const onSearch = (value) => {
        fn(value).then((res)=>{
          setData(res.data)
        })
      }
      return <div>
        <Search
      placeholder="input search text"
      allowClear
      enterButton="Search"
      size="large"
      onSearch={onSearch}
    />
        <Com data={data}/>
        </div>
    }
  }
}